<template>

	<div class="bossbox">
		<el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
			<span>休息一下吧</span>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="timeStart">确 定</el-button>
			</span>
		</el-dialog>
		<div class="topdev">
			<span @click="routerpushexercis">返回 <i class="el-icon-arrow-right"></i></span>
			<span>{{ testpapername}} </span>
		</div>
		<div class="celectdiv">
			<div class="leftDiv">
				<div class="topbox">
					<div>{{testpapername}}</div>
					<span>
						<i @click="timeStart" :class="isjishiqi ? 'el-icon-video-pause' : 'el-icon-video-play'">
						</i>
						{{ jishiqi }}
					</span>
				</div>
				<div class="questionsbox">

					<div class="shiti">


						<p style="display: flex;flex-wrap: wrap;">
							{{ numId }}/{{ num }}:
							<div v-html="`${md(danxuanti[numId - 1].content)}`"></div>

						</p>
						<!-- 单选-->
						<div :class="{ isliststyle: isliststyles === 1 }" class="timuxuanxiang" v-if="isliststyles===1">

							<div v-for="(item, index) in danxuanti[numId - 1].optionsList" :key="index" class="xuanxiang" @click.stop="
					          setactivexuanzhongTimu(
					            item.id,
					            danxuanti[numId - 1].id,
					            danxuanti[numId - 1].topicId
					          )"
							 :class="{
					            activexuanzhongTimu:
					               danxuanti[numId - 1].answerList &&
					               danxuanti[numId - 1].answerList.includes(item.id),
					          }">
								<div style="display: flex;">
									{{letter[index]}}
									:
									<div v-html="`${md(item.content)}`"></div>
								</div>

							</div>
						</div>
						<!-- 多选 -->
						<div :class="{ isliststyle: isliststyles === 2 }" class="timuxuanxiang" v-if="isliststyles===2">
							<div v-for="(item, index) in danxuanti[numId - 1].optionsList" :key="index" class="xuanxiang" @click.stop="
							  setactivexuanzhongTimu(
							    item.id,
							    danxuanti[numId- 1].id,
							    danxuanti[numId- 1].topicId
							  )"
							 :class="{
							    activexuanzhongTimu:
							     danxuanti[numId-1].answerList &&
							     danxuanti[numId-1].answerList.includes(item.id),
							  }">
								<div>{{letter[index]}}:</div>
								<div v-html="`${md(item.content)}`"></div>
							</div>
						</div>
						<!-- 判断题目 -->
						<div style="display: flex;margin: 40px;" v-if="isliststyles===3" @click.stop="
							  setactivexuanzhongTimu(
							    1,
							    danxuanti[numId - 1].id,
							    danxuanti[numId - 1].topicId
							  )
							">
							<!-- <div v-html="`${md(item.content)}`"></div> -->
							<el-radio v-model="danxuanti[numId - 1].answerList[0]" label="1">正确</el-radio>
							<el-radio v-model="danxuanti[numId - 1].answerList[0]" label="0">错误</el-radio>
						</div>

						<div class="shitibottombox">
							<i class="el-icon-star-on" :class="{active:danxuanti[numId - 1].isCollect===false,isactive:danxuanti[numId - 1].isCollect===true}"
							 @click="collectQuestion(danxuanti[numId - 1].id)">收藏本题</i>
							<!-- <i class="fa fa-share" aria-hidden="true">评论区求助</i>
              <i class="el-icon-s-order">题目反馈</i> -->
							<p>
								<button @click="setismasklaydiv" class="tiqianjiaojuanbtn" v-if="this.numId!=num">
									提前交卷
								</button>
								<button v-if="numId < danxuanti.length" @click="getxiayiti" class="xiayitibtn">
									下一题
								</button>
								<button v-if="numId == danxuanti.length" @click="goexercisetwo" class="xiayitibtn">
									确认交卷
								</button>
							</p>
						</div>
					</div>
				</div>
			</div>
			<div class="rightDiv">
				<!-- <div class="navtop">
					<p>知识点：{{ getTImu }}</p>
					<p>难度 ：{{ nandu }}</p>
				</div> -->
				<div class="navtimuzhongshu">
					<div v-if="tableList.singleList.length!==0">
						<p>单选题</p>
						<div class="xuanzeleixingbox">

							<div v-show="item.topicId === 1" v-for="(item, index) in tableList.singleList" :key="index" @click="getdanxuanId(index+1, item.topicId)"
							 class="xuanzeborder" :class="{
							    xuanzeborder1:item.button
							   }">
								{{ index+1}}
							</div>
						</div>
					</div>
					<div v-if="tableList.multipleList.length!==0">
						<p style="margin-top: 10px;">多选题</p>
						<div class="xuanzeleixingbox">
							<div v-show="item.topicId === 2" v-for="(item, index) in tableList.multipleList" :key="index" @click="getdanxuanId(index+1, item.topicId)"
							 class="xuanzeborder" :class="{
							    xuanzeborder1:item.button
							   }">
								{{index+1}}
							</div>
						</div>
					</div>
					<div v-if="tableList.judgeList.length!==0">
						<p style="margin-top: 10px;">判断题</p>
						<div class="xuanzeleixingbox">
							<div v-show="item.topicId === 3" v-for="(item,index) in tableList.judgeList" :key="index" @click.stop="getdanxuanId(index+1,item.topicId)"
							 class="xuanzeborder" :class="{
							    xuanzeborder1:item.button
							   }">
								{{index+1}}
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div v-show="ismasklaydiv" class="Masklayerdiv">
			<!-- 遮罩层 -->
			<div class="Masklayerbox">
				<strong>是否继续交卷</strong>
				<div class="Masklayerminibox">
					试卷一共{{ num }}道题， 本次作答了{{ numId }}道题
					，是否继续交卷
				</div>
				<div class="masklbtn">
					<button @click="setismasklaydivfale" class="tiqianjiaojuanbtn">
						取消
					</button>
					<button @click="goexercisetwo" class="xiayitibtn">确认交卷</button>
				</div>
			</div>
			<div class="chahao el-icon-close"></div>
		</div>
	</div>
</template>



<script>
	import marked from "marked";
	import {
		HttpManager
	} from '../../request/Special.js'
	import {
		TestManager
	} from '../../request/test.js'
	export default {
		name: "exerciseone",
		data() {
			return {
				letter: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'R', 'J', 'K', 'L'],
				practiceTimu: "javaEE",
				nandu: "入门",
				// hour: 0, //定义时分秒
				// minute: 0,
				// second: 0,
				// ms: 0,
				time: "",
				jishiqi: "",
				isjishiqi: false, //计时器的样式
				isliststyles: 1,
				activexuanzhongTimus: null, //高亮选中题目
				nandu: "",
				getTImu: "",
				timuneirong: [],
				danxuanti: [],
				duoxuanti: [],
				panduanti: [],
				xuanzhongTimulist: [],
				// zuodajidao: "2",
				ismasklaydiv: false,
				numId: 1,
				timuLeibie: "",
				tableList: {
					singleList: [],
					multipleList: [],
					judgeList: [],
				},
				num: 0,
				radio: '',
				dialogVisible: false,
				flag: 1,
				testpapername: '',
				timersecond: 0,
				isCollect: 0
			};
		},
		computed: {

			zuodajidao() {
				return this.danxuanti.filter((item, index) => {
					return item.button
				}).length;
			}
		},
		methods: {
			md(content) {
				return marked(content);
			},
			setisjishiqis() {
				// 设置计时器
				this.timersecond = this.timersecond + 1;
				let second = this.timersecond % 60;
				let minute = Math.floor(this.timersecond / 60);
				let hour = Math.floor(this.timersecond / 3600) === 24 ? 0 : Math.floor(this.timersecond / 3600);

				second = second >= 60 ? 0 : second < 10 ? '0' + second : second;
				minute = minute >= 60 ? 0 : minute < 10 ? '0' + minute : minute;
				hour = hour === 24 ? 0 : hour < 10 ? '0' + hour : hour;


				this.jishiqi = `${hour}:${minute}:${second}`;
				localStorage.setItem('timersecond', this.timersecond)

			},
			timeStart() {
				if (!this.isjishiqi) {
					this.dialogVisible = false;
					this.isjishiqi = true;
					// 如果 本地存储有时间
					const timersecond = localStorage.getItem('timersecond');
					if (timersecond) {
						this.timersecond = parseInt(timersecond);
					}

					this.time = setInterval(() => {
						this.setisjishiqis();
					}, 1000);

				} else {
					this.dialogVisible = true;
					this.isjishiqi = false;
					clearInterval(this.time);
				}


			},
			getdanxuanId(idx, type) {
				//获取点击的索引
				this.numId = idx;
				if (type == 2) {
					this.numId = this.tableList.singleList.length + idx;
				}
				if (type == 3) {
					this.numId = this.tableList.singleList.length + idx + this.tableList.multipleList.length;
				}

				this.isliststyles = type;


			},
			setismasklaydiv() {
				// 遮罩层开
				this.ismasklaydiv = true;
			},
			setismasklaydivfale() {
				//   遮罩层关
				this.ismasklaydiv = false;
			},
			goexercisetwo() {
				var data = [];
				var singleList = [];
				var multipleList = [];
				var judgeList = [];
				var fillsList = [];
				var shortAnswer = [];
				for (let i = 0; i < this.danxuanti.length; i++) {
					// alert(this.danxuanti[i].id);
					if (this.danxuanti[i].topicId === 1) {
						singleList.push({
							questionId: this.danxuanti[i].id,
							questionAnswer: this.danxuanti[i].answerList.join()
						});

					} else if (this.danxuanti[i].topicId === 3) {
						judgeList.push({
							questionId: this.danxuanti[i].id,
							questionAnswer: this.danxuanti[i].answerList.join()
						});
						console.log(judgeList);
					} else if (this.danxuanti[i].topicId === 2) {
						multipleList.push({
							questionId: this.danxuanti[i].id,
							questionAnswer: this.danxuanti[i].answerList.join(',')
						});
					}
				}
				data.push(...singleList);
				data.push(...multipleList);
				data.push(...judgeList);
				data.push(...fillsList);
				data.push(...shortAnswer);
				var testPaperId = window.localStorage.getItem("testPaperId");
				TestManager.addTestRecord(data, this.timersecond, testPaperId).then(res => {

					console.log(res);
					window.localStorage.removeItem('testPaperId')
					window.localStorage.removeItem('danxuanti')
					window.localStorage.removeItem('testpapername')
					window.localStorage.removeItem('timersecond')
					this.$router.push({
						path: "/Specialanalysis",
						query: {
							id: res.data.data.id
						}
					});

				})

			},
			routerpushexercis() {
				this.$router.push("/exercis");
			},
			getxiayiti() {
				// 设置下一题按钮
				// console.log(  this.danxuanti[this.numId - 1].data);
				if (this.numId == this.danxuanti.length) {
					return;
				}
				this.numId++;
				const a = this.danxuanti[this.numId - 1].topicId;
				this.isliststyles = a;

			},
			setactivexuanzhongTimu(i, id, type) {
				//设置选中高亮题目 并获得题目类型
				const curr = this.danxuanti.find((item) => item.id === id);

				if (type == 1) {
					curr.answerList.length = 0;
					curr.answerList.push(i);
					curr.button = true
				} else if (type == 3) {
					curr.button = true
				} else if (type == 2) {
					const idx = curr.answerList.indexOf(i);
					if (idx == -1) {
						curr.answerList.push(i);
					} else {
						curr.answerList.splice(idx, 1);

					}

					curr.button = true

				} else {
					curr.button = true
				}

				window.localStorage.setItem("danxuanti", JSON.stringify(this.danxuanti));
				// window.localStorage.setItem("tableList", JSON.stringify(this.tableList));

			},
			index() {

			},
			Init(val) {
				var testPaperId = window.localStorage.getItem("testPaperId");
				var parmas = {
					id: testPaperId
				}
				if (window.localStorage.getItem("danxuanti")) {
					this.testpapername = localStorage.getItem('testpapername')
					// this.tableList = JSON.parse(window.localStorage.getItem("tableList"));
					this.danxuanti = JSON.parse(window.localStorage.getItem("danxuanti"));
					console.log(this.danxuanti);
					this.num = this.danxuanti.length;
					const qList = ['singleList', 'multipleList', 'judgeList'];
					this.danxuanti.forEach(q => {
						if (q.topicId === 1) {
							this.tableList.singleList.push(q);
						} else if (q.topicId === 2) {
							this.tableList.multipleList.push(q);
						} else if (q.topicId === 3) {
							this.tableList.judgeList.push(q);
						}
					})


				} else {
					TestManager.getQuestionnaireExercise(this.qs.stringify(parmas))
						.then((res) => {
							localStorage.setItem('testpapername', res.data.data.testPaper.name);
							this.testpapername = res.data.data.testPaper.name;
							const qList = ['singleList', 'multipleList', 'judgeList', ];
							qList.forEach(q => {
								this.tableList[q] = res.data.data[q].map(item => {
									return {
										...item,
										answerList: [],

									}
								})

							})

							this.danxuanti = [...this.tableList.singleList, ...this.tableList.multipleList, ...this.tableList.judgeList]
							localStorage.setItem('danxuanti', JSON.stringify(this.danxuanti))
							this.num = this.danxuanti.length;
							console.log(this.danxuanti);

						});
				}

			},
			handleClose() {
				this.Visible = true;
			},
			//收藏题目
			collectQuestion(id) {
				var parmas = {
					questionId: id,
					testPaperId: window.localStorage.getItem("testPaperId")
				}
				TestManager.collectQuestion(this.qs.stringify(parmas)).then(e => {
					console.log(e);
					this.danxuanti[this.numId - 1].isCollect = !this.danxuanti[this.numId - 1].isCollect;
					localStorage.setItem('danxuanti', JSON.stringify(this.danxuanti));
				})
			},



		},
		created() {

			this.Init();

			// 初始化计时器的设置
			this.timeStart();

			this.xuanzhongTimulist = new Array(this.danxuanti.length);
		},
		destroyed() {
			//  完成交卷

			clearInterval(this.time);
		}
	};
</script>

<style scoped>
	* {
		box-sizing: border-box;
	}

	.topdev {
		width: 86%;
		height: 50px;
		margin: 0 auto;
		line-height: 50px;
	}

	.topdev span:nth-child(1):hover {
		cursor: pointer;
		text-decoration: underline;
	}

	.celectdiv {
		width: 80%;
		/* background-color: #f6f6f6; */
		margin: 0 auto;
		padding: 10px;
		display: flex;
		overflow: hidden;
	}

	/* 左边的盒子 */
	.leftDiv {
		width: 70%;
		background-color: #fff;
		margin-right: 30px;
	}

	.topbox {
		height: 100px;
		padding: 20px;
		display: flex;
		align-items: center;
		position: relative;
		border-bottom: 2px solid #f6f6f6;
	}

	.topbox span {
		width: 200px;
		display: flex;
		align-items: center;
		position: absolute;
		right: 0px;
	}

	.topbox span i {
		font-size: 20px;
		font-weight: bold;
		color: #00b8a6;
		margin-right: 50px;
	}

	.topbox span i:hover {
		cursor: pointer;
		color: #03d3bd;
		font-weight: bold;
	}

	.topbox P {
		font-weight: bold;
	}

	.headimagebox {
		width: 70px;
		height: 70px;
		border-radius: 50%;
		margin-right: 20px;
		background-color: #f6f6f6;
	}

	/* 试题的box */
	.questionsbox {
		width: 100%;
		margin-top: 20px;
		padding: 10px;
	}

	.timuxuanxiang {
		width: 100%;
		margin-top: 20px;
		list-style: upper-latin;
	}

	.timuxuanxiang li {
		list-style-position: inside;
	}

	.isliststyle {
		list-style: decimal;
	}

	.xuanxiang {
		/* background-color: #f5f5f5; */
		width: 100%;
		padding: 20px;
		margin-bottom: 15px;
		border-radius: 5px;
		border: #ebebeb solid 1px;
	}

	.xuanxiang:hover {
		cursor: default;
	}

	.activexuanzhongTimu {
		/* 选中题目的高亮 */
		/* background-color: #6ab0f1; */
		border: #03d3bd solid 1px;
	}

	/* 最下面的盒子 */
	.shitibottombox {
		height: 100px;
		align-items: flex-start;
		padding-top: 10px;
		display: flex;
		position: relative;
	}

	.shitibottombox p {
		display: flex;
		position: absolute;
		right: 0px;
	}

	/* .shitibottombox i {
		
	} */


	.shitibottombox i:hover {
		cursor: pointer;
		color: #00b8a6;
	}

	/* 最下main的按钮 */
	.tiqianjiaojuanbtn,
	.xiayitibtn {
		width: 100px;
		height: 35px;
		border-radius: 5px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 10px;
	}

	.tiqianjiaojuanbtn {
		background-color: #ffffff;
		border: 1px solid #32c6b7;
	}

	.tiqianjiaojuanbtn:hover {
		cursor: pointer;
		color: #0bbbaa;
	}

	.xiayitibtn {
		background-color: #00b8a6;
		color: #fff;
		border: none;
	}

	.xuanzeborder1 {
		background-color: #04dac4;
		color: white;
	}


	.xiayitibtn:hover {
		cursor: pointer;
		background-color: #04dac4;
	}

	/* 右边的盒子 */
	.rightDiv {
		width: 25%;
		display: flex;
		justify-content:center;
		/* align-items: center; */
		/* height: 500px; */
	}

	.navtop {
		height: 100px;
		border-radius: 10px;
		padding: 20px;
		background-color: #fff;
		margin-bottom: 30px;
	}

	.navtimuzhongshu {
		padding: 10px;
		/* height: 80%; */
		background-color: #fff;
	}

	.xuanzeleixingbox {
		display: flex;
		flex-wrap: wrap;
		padding: 5px;
	}

	.xuanzeborder {
		width: 55px;
		height: 35px;
		margin-top: 20px;
		border: 1px solid #fcfcfc;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 10px;
	}

	.xuanzeborder:hover {
		cursor: pointer;
		color: #13bdac;
		border: 1px solid #13bdac;
	}

	.bossbox {
		position: relative;
	}

	.Masklayerdiv {
		/* 遮罩层 */
		z-index: 2;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.486);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.Masklayerbox {
		width: 350px;
		height: 200px;
		background-color: #fff;
		border-radius: 10px;
		padding: 30px;
		display: flex;
		flex-direction: column;
		position: absolute;
	}

	.chahao {
		position: relative;
		height: 50px;
		width: 50px;
		top: -75px;
		right: -150px;
		display: flex;
		justify-content: center;
		align-items: center;

		color: rgb(163, 157, 157);
	}

	.chahao:hover {
		cursor: pointer;
		color: rgb(204, 198, 198);
	}

	.Masklayerbox strong {
		height: 30px;
	}

	.Masklayerminibox {
		padding: 20px;
	}

	.masklbtn {
		display: flex;
		justify-content: center;
	}

	.isactive {
		cursor: pointer;
		color: #00b8a6;
	}

	.active {
		height: 35px;
		line-height: 35px;
		color: #cdb8aa;
		margin-right: 20px;
	}

	.snum {
		position: absolute;
		left: 18px;
		font-size: 2em;
		top: 36px;
	}
</style>
